<script lang="ts" setup>
import { getRedirectUrl, doAuthorize } from '@/api/wechat';
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '@/stores';

const userStore = useUserStore();

onLoad(async (param: any) => {
	if (param.code) {
		const response = await doAuthorize({ code: param.code });
		if (response.code === 20000) {
			userStore.setToken(response.data.user?.token);
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	}
});

function toHome() {
	uni.switchTab({
		url: '/pages/index/index'
	});
}

async function handleLogin() {
	const response = await getRedirectUrl();
	if (response.code === 20000) {
		window.location.href = response.data;
	}
}
</script>

<template>
	<view class="login">
		<view class="background">
			<view class="one"></view>
			<view class="two"></view>
			<view class="three"></view>
			<view class="four"></view>
		</view>
		<x-container direction="vertical" align="center" padding="410rpx 50rpx" gap="90rpx">
			<x-image src="/login/logo.png" width="395rpx" mode="widthFix" prefix></x-image>
			<x-text color="#2867DD" :size="42" bold>用大蓝卡，天天五折</x-text>
			<x-space direction="vertical">
				<x-button type="primary" size="large" style="width: 100%" @tap="handleLogin" outline>微信用户一键登录</x-button>
				<x-checkbox>
					<x-text color="#666666" :size="24">我已阅读并同意</x-text>
					<x-text color="#0022AB" :size="24">《教培小蓝卡服务协议》《隐私政策》</x-text>
				</x-checkbox>
			</x-space>
			<x-text color="#999999" :size="24" @tap="toHome">暂不登录</x-text>
		</x-container>
	</view>
</template>

<style lang="scss" scoped>
.login {
	height: 100vh;
	position: relative;

	.background {
		position: absolute;
		width: 100%;
		height: 100vh;
		z-index: -1;

		.one {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 600rpx;
			background: linear-gradient(180deg, #c9e1ff 0, rgba(224, 229, 249, 0) 100%, #e0e5f9 100%);
			filter: blur(24px);
		}

		.two {
			position: absolute;
			left: 0;
			top: 393rpx;
			width: 406rpx;
			height: 1194rpx;
			background: linear-gradient(180deg, #f9d4de 0%, rgba(224, 229, 249, 0) 100%, #e0e5f9 100%);
			filter: blur(36px);
		}

		.three {
			position: absolute;
			right: 0;
			top: 98rpx;
			width: 315rpx;
			height: 1290rpx;
			background: linear-gradient(180deg, #faf5ee 0%, rgba(224, 229, 249, 0) 100%, #e0e5f9 100%);
			filter: blur(50px);
		}

		.four {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 466rpx;
			background: linear-gradient(180deg, #c9e1ff 0%, rgba(224, 229, 249, 0) 100%, #e0e5f9 100%);
			filter: blur(32px);
		}
	}
}
</style>
